<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts Average Time Bar Chart</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <style>
        #chartContainer {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>

<div id="chartContainer"></div>

<script>
    // 加载average.json数据并初始化ECharts
    fetch('topn.json')
        .then(response => response.json())
        .then(data => {
            // 初始化ECharts实例
            var chart = echarts.init(document.getElementById('chartContainer'));

            // 准备图表配置项
            var option = {
                title: {
                    text: 'Topn Chart'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.user_id),
                    name: 'User ID'
                },
                yAxis: {
                    type: 'value',
                    name: 'Time'
                },
                series: [{
                    name: 'Time',
                    type: 'bar',
                    data: data.map(item => item.time)
                }]
            };

            // 使用配置项和数据显示图表
            chart.setOption(option);
        })
        .catch(error => console.error('Error loading data:', error));
</script>

</body>
</html>
